<template>
  <div ref="print" v-show="isPreview">
    <div class="print-wrap-body" style="width:99%; margin: 10px auto 0;" v-for="(item,index) in list" :key="index">
      <table style="border-collapse: collapse" width="100%">
        <tbody>
          <tr height="55px">
            <td rowspan="1" colspan="4" valign="center" style="font-weight: bold; font-size: 16px; text-align: center; width: 60%; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">索赔标签</td>
            <td rowspan="1" colspan="4" valign="center" style="font-weight: bold; font-size: 16px; text-align: center; width: 40%; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">服务站信息</td>
          </tr>
          <tr height="44px">
            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">服务站号</td>
            <td valign="center" style="width:15%;font-weight: 400; font-size: 14px; text-align: left; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.dealer}}</td>

            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">服务站简称</td>
            <td valign="center" style="width:25%;font-weight: 400; font-size: 14px; text-align: left; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.dealerName}}</td>

            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">服务站简称</td>
            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.dealerName}}</td>

            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">车牌号</td>
            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.licenseNo}}</td>
          </tr>
          <tr height="44px">
            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">车辆车系</td>
            <td valign="center" style="width:15%;font-weight: 400; font-size: 14px; text-align: left; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.seriesId}}</td>

            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">索赔单号</td>
            <td valign="center" style="width:25%;font-weight: 400; font-size: 14px; text-align: left; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.claimNo}}</td>

            <td rowspan="7" colspan="3" valign="center" style="font-weight: 400; border: solid #000000 1px">
              <img style="width:167px;height:167px;display:block;margin:0 auto 0;vertical-align: middle;" :src="item.codeUrl" alt="二维码" />
            </td>
            <td rowspan="7" colspan="1" valign="center" style="font-weight: 400; font-size: 14px; text-align: center; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px"><div style="width:60px;height:60px;text-align: center;line-height:60px">{{item.mainPart ? '主' : '次'}}</div></td>
          </tr>
          <tr height="44px">
            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">车辆车型</td>
            <td valign="center" style="width:15%;font-weight: 400; font-size: 14px; text-align: left; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.model}}</td>

            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">VIN码</td>
            <td valign="center" style="width:25%;font-weight: 400; font-size: 14px; text-align: left; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.vin}}</td>
          </tr>
          <tr height="44px">
            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">发动机号</td>
            <td rowspan="1" colspan="3" valign="center" style="width:50%;font-weight: 400; font-size: 14px; text-align: left; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.engineNo}}</td>
          </tr>
          <tr height="44px">
            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">变速箱号</td>
            <td rowspan="1" colspan="3" valign="center" style="width:50%;font-weight: 400; font-size: 14px; text-align: left; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.gearBox}}</td>
          </tr>
          <tr height="44px">
            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">电机号</td>
            <td rowspan="1" colspan="3" valign="center" style="width:50%;font-weight: 400; font-size: 14px; text-align: left; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.motorNo}}</td>
          </tr>
          <tr height="44px">
            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">电池编号</td>
            <td rowspan="1" colspan="3" valign="center" style="width:50%;font-weight: 400; font-size: 14px; text-align: left; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.evNo}}</td>
          </tr>
          <tr height="44px">
            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">生产日期</td>
            <td rowspan="1" colspan="3" valign="center" style="width:50%;font-weight: 400; font-size: 14px; text-align: left; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.prodDate}}</td>
          </tr>
          <tr height="44px">
            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">销售日期</td>
            <td valign="center" style="width:15%;font-weight: 400; font-size: 14px; text-align: left;  border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.saleDate}}</td>

            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left;  background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">行驶里程</td>
            <td valign="center" style="width:25%;font-weight: 400; font-size: 14px; text-align: left;  border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.mileage}}</td>

            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left;  background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">旧件代码</td>
            <td rowspan="1" colspan="3" valign="center" style="width:30%;font-weight: 400; font-size: 14px; text-align: left;  border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.partCode}}</td>
          </tr>
          <tr height="44px">
            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">维修日期</td>
            <td valign="center" style="width:15%;font-weight: 400; font-size: 14px; text-align: left; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.repairDate}}</td>

            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">索赔类型</td>
            <td valign="center" style="width:25%;font-weight: 400; font-size: 14px; text-align: left; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.type}}</td>

            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">旧件名称</td>
            <td rowspan="1" colspan="3" valign="center" style="width:30%;font-weight: 400; font-size: 14px; text-align: left; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.partsName}}</td>
          </tr>
          <tr height="44px">
            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">故障现象</td>
            <td rowspan="1" colspan="3" valign="center" style="width:50%;font-weight: 400; font-size: 14px; text-align: left; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.faultAppear}}</td>

            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">旧件数量</td>
            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.number}}</td>

            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; background-color: #ffffff; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">供应商编码</td>
            <td valign="center" style="width:10%;font-weight: 400; font-size: 14px; text-align: left; border-top: solid #000000 1px; border-right: solid #000000 1px; border-left: solid #000000 1px; border-bottom: solid #000000 1px">{{item.supCode}}</td>
          </tr>
        </tbody>
      </table>
      <div style="page-break-after: always" v-if="(index + 1) % 2 === 0">&nbsp;</div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  name: 'templateWaitReturnLabelList',
  props: {
    //传值 从上一页
    data: {
      type: Object,
      required: true,
      default() {
        return {};
      }
    },
    isPreview: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      nowTime: moment().format('YYYY-MM-DD'),
      list: []
    };
  },
  computed: {},
  created() { },
  mounted() {
    this.list = this.data.rows;
    this.$nextTick(function () {
      //必须写
      console.log('this.list 渲染数据 =>', this.list, this.data);
      this.$emit('onPrintTable', this.$refs.print.innerHTML);
    });
    if (this.isPreview) {
      this.fillInToDom();
    }
  },
  methods: {
    fillInToDom() {
      this.isPreview = true;
    },


  }
};
</script>

<style>
</style>
